<script setup>
import {ref} from 'vue'
import {ElMessage, ElMessageBox, ElNotification,} from "element-plus";
import router from "../router/index.js";

const data = ref({
  arr: [
    {id: '1', name: '李四', age: '28', address: '北京市'},
    {id: '2', name: '王五', age: '29', address: '广州市'},
    {id: '3', name: '张三', age: '18', address: '南宁市'},

  ]
})


//编辑
const edit = (index, row) => {
  console.log("index:", index, "row:", row)
}
//新增
const add = () => {
  console.log(data.value)
}
//删除用户
const openConfirm = () => {
  ElMessageBox.confirm('删除', '记录', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    showClose: false,
  })

}

//返回登录
const handleLogout = () =>{
  localStorage.removeItem("isAuthenticated");
  router.push("/page1");
};


</script>

<template>
  <div>
    <h2>欢迎，管理员！</h2>
    <el-button @click="handleLogout">返回登录</el-button>
  </div>

  <h3><el-button type="primary" @click="add">新增用户</el-button></h3>



  <el-table :data="data.arr"  border style="width: 900px;margin: 3px 0;">
    <el-table-column prop="name" label="姓名"/>
    <el-table-column prop="age" label="年龄" width="300"/>
    <el-table-column prop="address" label="地址"/>


    <el-table-column label="操作" width="150">
      <template #default="scope">
        <el-button size="small" type="primary" @click="edit">
          编辑
        </el-button>
        <el-button size="small" @click="openConfirm">删除 </el-button>
      </template>
    </el-table-column>
  </el-table>


</template>

<style scoped>

</style>




